<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>聊天室</title>
	<style type="text/css">
		body,html,div,p,span,ul,li{margin: 0;padding: 0;box-sizing:border-box;}
		ul,li{list-style: none;}
		body,html{height: 100%;font-size: 14px;font-family: "微软雅黑"}
		.main{height: 100%;padding-right: 200px;overflow: hidden;}
		.stall{height: 100%;position: relative;}
		.infoBox{height: 100%;padding-bottom: 130px;}
		.infoLi{height: 100%;overflow: auto;padding: 12px 6px;}
		.infoLi ul{padding-top: 20px;}
		.infoLi ul li{margin-bottom: 16px;display: block;overflow: hidden;}
		.infoLi ul li span{display:inline-block;}
		.infoLi ul li .txt{background: #dcdcdc;padding: 4px;border-radius: 4px;}
		.infoLi ul li .name{margin-right: 4px;font-weight: 600;padding: 4px;}
		.infoLi .right{text-align: right}
		.infoLi .right span{float: right}
		.stall .info{height: 100%;padding-bottom: 130px;box-sizing:border-box;}
		.stall .send{height: 130px;border-top: #ddd solid 1px;position:absolute;bottom: 2px;left: 0;width: 100%;}
		.pople{height: 100%;width: 200px;position: absolute;right: 0;top: 0;border-left: #ddd solid 1px;}
		.sengTop{width: 100%;height: 30px;background: #ddd;}
		.sendInfo .sendText{width: 79.5%;border: #ddd solid 1px;height: 96px;float: left}
		.sendInfo .sendInput{width: 20%;height: 100px;float: left}
		
		.pople p{width: 100%;background: #ddd;line-height: 2;text-align: center;}
		.pople ul{padding: 4px;}
		.pople ul li{cursor: pointer;margin-bottom: 6px;}
		.pople ul li:hover{color: red;}

		.markBox{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: rgba(255,255,255,1);z-index: 10;}
		.markName{width: 300px;height: 300px;margin: auto;margin-top: 20%;}
		.markName p{line-height: 2;}

		.message{width: 100%;position:absolute;top: 0;left: 0;height: 24px;background: #F8CA7A;z-index: 11;display: none;line-height: 24px;padding: 0 10px;}
	</style>
</head>
<body>
	<div class="main">
		<p class="message"></p>
		<div class="markBox">
			<div class="markName">
				<p>请输入用户名:</p>
				<input type="text" name="" class="name">
				<input type="button" name="" class="mark" value="进入聊天室">
			</div>
		</div>
		<div class="stall">
			<div class="infoBox">
				<div class="infoLi">
					<ul>
					</ul>
				</div>
			</div>
			<div class="send">
				<div class="sengTop">
					
				</div>
				<div class="sendInfo">
					<form action="">
						<textarea id="a" class="sendText"></textarea>
						<button type="submit" class="sendInput" >发送</button>
					</form>
				</div>
			</div>
		</div>
		<div class="pople">
			<p><span></span> 个人在线</p>
			<ul>
			</ul>
		</div>
	</div>
</body>
<script src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript">
	$(function(){

		document.onkeydown=function(e){
			if(e.keyCode == 13 && e.ctrlKey){
			document.getElementById("a").value += "\n";
			}else if(e.keyCode == 13){
			// 避免回车键换行
			e.preventDefault();
			var mtxt=$('.sendText').val();
			if(mtxt!=''){
				socket.emit('chat', {txt:$('.sendText').val()});
				$('.sendText').val('');
			}
		}
	}

		var socket = io();

		$('.mark').click(function(){
			var name=$('.name').val();
			if(name!=''){
				$('.markBox').css('display','none');
				socket.send(name);
			}
		})


		//按收在线人员
		socket.on('open',function(data){
			var len=data.length;
		  	$('.pople p span').html(len);
		  	$('.pople ul').empty();
		  	for(var i=0;i<len;i++){
		  		var li="<li>"+data[i].name+"</li>";
		  		$('.pople ul').append(li);
		  	}
		});

		//谁进入聊天室
		socket.on('onli',function(n){
			var txt=n+'进入聊天室';
			msg(txt);
		});

		//谁退出聊天室
		socket.on('outli',function(n){
			var txt=n+'退出聊天室';
			msg(txt);
		});



		//发送信息
		$('.sendInput').click(function(){
			var mtxt=$('.sendText').val();
			if(mtxt!=''){
				socket.emit('chat', {txt:$('.sendText').val()});
				$('.sendText').val('');
			}
			return false
			
		})
		

		//接收其他人的信息
		socket.on('tall',function(n){
			var li='<li><span class="name">'+n.name+' : </span><span class="txt">'+n.txt+'</span></li>'
			$('.infoLi ul').append(li);
		})

		//接收自己的信息
		socket.on('mtall',function(n){
			var li='<li class="right"><span class="name"> : 我</span><span class="txt">'+n+'</span></li>'
			$('.infoLi ul').append(li);
		})


		function msg(txt){
			$('.message').html(txt);
			$('.message').show();
			setTimeout(function(){
				$('.message').hide();
			},3000)
		}

	})
</script>
</html>